<template>
  <div class="anchor-analysis bgc-black">
    <!-- 搜索框 -->
    <div>
      <search-area :total='total' :totalAmount='totalAmount' @searchRes='searchRes' @resetComditions='resetComditions' :placeholder='placeholder'></search-area>
    </div>
    <!-- 搜索条件 -->
    <div class="mar-t-20">
      <search-condition :comditions='comditions' @changeComditions='changeComditions'></search-condition>
    </div>
    <!-- 查看按钮 -->
    <div class="font-white mar-t-16">
      <view-button  @changeDate='changeDate' @exportExcle="exportExcle" sortText="主播销售额"></view-button>
    </div>
    <!-- 列表数据 -->
    <div class="mar-t-10">
      <anchor-tbale ref="tableList"></anchor-tbale>
    </div>
    <!-- 分页 -->
    <div v-if="parseInt(total)" class="mar-t-20 pagination">
      <el-pagination background layout="prev, pager, next" :current-page="params.currentPage" :page-size="10" :total="parseInt(total)" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import ViewButton from '../components/ViewButton.vue'
import SearchArea from '../components/SearchArea.vue'
import SearchCondition from '../components/SearchCondition'
import AnchorTbale from './components/AnchorTbale'
import { anchorAnalysis } from '@/api/data-analysis/data-analysis'
import { downloadFile } from '@/api/common/common'

export default {
  components: { SearchArea, SearchCondition, AnchorTbale, ViewButton },
  data() {
    return {
      params: {
        currentPage: 1, // 当前页
        endDate: '', // 结束时间
        enterpriseId: '', // 企业id
        maxTotalPrice: '', // 商品销量查询范围结束值
        minTotalPrice: '', // 商品销量查询范围起始值
        saleSource: '', // 销售渠道 0 微信 1:抖音 2:快手 3: 淘宝 4: 拼多多
        size: 10, // 每页显示条数，默认 10
        sortType: '', // 排序方式 1：按销量排序 2：按销售额排序
        startDate: '', // 起始时间
        nickname: ''
      },
      total: '',
      totalAmount: '',
      comditions: ['Performance', 'saleSource'],
      placeholder: '请输入主播名称'
    }
  },
  mounted() {
    this.resetComditions()
    this.init()
  },
  destroyed() {
    this.$bus.$off('resetComditions')
  },
  watch: {
    'params.currentPage'() {
      this.anchorAnalysis()
    }
  },
  methods: {
    init() {
      // 获取今日日期
      this.params.startDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
      this.params.endDate = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
      // 企业Id
      this.params.enterpriseId = this.getEnterpriseId()
      this.anchorAnalysis()
    },
    // 初始化主播分析数据
    anchorAnalysis() {
      this.$bus.$emit('getAnchorRecords', [])
      this.$bus.$emit('loading', true)
      const data = this.params
      anchorAnalysis(data).then(response => {
        const res = response.data
        this.total = res.total
        this.totalAmount = res.totalAmount
        this.records = res.records
        this.records.forEach((item, index) => {
          this.$set(item, 'rank', ((index + 1) + (this.params.currentPage * 10 - 10)))
        })
        this.$bus.$emit('getAnchorRecords', this.records)
        this.$bus.$emit('loading', false)
      }).catch(err => {
        this.$bus.$emit('loading', false)
        console.log(err)
      })
    },
    // 改变分页
    handleCurrentChange(num) {
      this.params.currentPage = num
    },
    // 通过主播名称 进行搜索
    searchRes(res) {
      this.params.currentPage = 1
      this.params.nickname = res
      this.anchorAnalysis()
    },
    // 切换查询时间
    changeDate(startTime, endTime) {
      this.params.currentPage = 1
      this.params.startDate = startTime
      this.params.endDate = endTime
      this.anchorAnalysis()
    },
    // 切换查询条件
    changeComditions(data) {
      Object.assign(this.params, data)
      this.params.currentPage = 1
      this.anchorAnalysis()
    },
    exportExcle() {
      const data = this.params
      downloadFile('/data/userAnalysis/exportAnchorAnalysis', data, '主播分析.xlsx')
    },

    // 重置赛选条件
    resetComditions() {
      this.$bus.$on('resetComditions', () => {
        this.params = {
          currentPage: 1,
          endDate: '',
          enterpriseId: '',
          maxTotalPrice: '',
          minTotalPrice: '',
          saleSource: '',
          size: 10,
          sortType: '',
          startDate: '',
          nickname: ''
        }
        this.init()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .anchor-analysis {
    padding: 17px 24px;
    min-height: 100vh;
  }
  .pagination {
    text-align: center;
    /deep/ .el-pager li, /deep/ .btn-prev , /deep/ .btn-next{
      border: 1px solid rgba(255,255,255,0.5);
      color: rgba(255,255,255,0.5);
      background: #2b2b2e;
    }
}
</style>